<template>
  <div class="big">
    <div class="box">
      <!-- <header class="header"></header>
      <main class="main"></main> -->
      <router-view></router-view>
    </div>
    <!-- <footer class="footer"></footer> -->
    <router-view name="footer"></router-view>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
html,
body,
#app,
.big {
  width: 100%;
  height: 100%;
}
.big {
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  overflow: flex;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
  }
  .main {
    margin-top: 80px;
  }
  .ul {
    column-count: 2;
    li {
      break-inside: avoid;
    }
  }
}
</style>